<template>
  <div>
    <el-form ref="form" :model="form" label-width="207px">
      <el-form-item label="约排课启用">
        <el-radio v-model="form.open" :label="true">开启</el-radio>
        <el-radio v-model="form.open" :label="false">关闭</el-radio>
      </el-form-item>
      <el-form-item label="排课时间">
        <el-time-picker
          v-model="form.date"
          is-range
          range-separator="|"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        />
        <p style="margin:0;color:#8a8a8a">老师仅能在此时间段安排课程预约时间</p>
      </el-form-item>
      <el-form-item label="单节排课时长">
        <el-radio v-model="form.timeLength" :label="30">30分钟</el-radio>
        <el-radio v-model="form.timeLength" :label="60">60分钟</el-radio>
        <el-radio v-model="form.timeLength" label="self">自定义</el-radio>
        <el-input v-if="form.timeLength === 'self' " v-model="form.self" style="width:100px;"/>
        <span v-if="form.timeLength === 'self'">分钟</span>
        <p style="margin:0;color:#8a8a8a">请设置每节课次的可预约时长，重新设置时长后只对新创建的排课时间段生效</p>
      </el-form-item>
      <el-form-item label="取消预约设置">
        支持学员或老师在开课前
        <el-input v-model="form.cancle" style="width:80px;"/>分钟取消已预约的课次
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveInfo">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { updateArrange, getArrange } from '@/api/subject/settime' // 接口
import { getTenantId, getUserId, getUserName } from '@/utils/auth'
export default {
  data() {
    return {
      radio: '',
      form: {
        timeLength: 30,
        date: '',
        cancle: '',
        open: false,
        self: ''
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getArrange(getTenantId()).then(res => {
        if (res.data.item) {
          this.form = res.data.item
          const time = []
          time.push(new Date(this.form.startTime))
          time.push(new Date(this.form.endTime))
          this.form.date = time
          if (this.form.timeLength !== 30 && this.form.timeLength !== 60) {
            this.form.self = this.form.timeLength
            this.form.timeLength = 'self'
          }
        }
      })
    },
    saveInfo() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.startTime = this.form.date[0]
          this.form.endTime = this.form.date[1]
          if (this.form.timeLength === 'self') {
            this.form.timeLength = this.form.self
          }
          if (!this.form.id) {
            this.form.userId = getUserId()
            this.form.userName = getUserName()
            this.form.tenantId = getTenantId()
          }
          updateArrange(this.form).then(response => {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        } else {
          this.$message.error('保存失败！')
          return false
        }
      })
    }
  }
}
</script>
